<template>
  <div class="container">
    <div id="fiveChart"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import mapApi from "./map";
import mapData from "./map/500000.json"; // 重庆地图数据
import mainCity from "./map/mainCity.json"; // 重庆主城地图数据
import { areaCodeList } from "./map/areaCodeDict";
import * as echarts from "echarts";
import axios from "axios";
import "echarts-gl";
import { ref } from "vue";

const mapjsonData = ref(mapData);
const cityJsonData = ref({
  type: "FeatureCollection",
  features: [],
});

const setColor = (num) => {
  if (num >= 0 && num <= 30) return "#3d8e63";
  if (num >= 31 && num <= 60) return "#3e81bd";
  if (num >= 61 && num <= 90) return "#e1d34e";
  if (num >= 91 && num <= 120) return "#ae8655";
  if (num > 120) return "#bd5255";
};
// 点击按钮的事件处理函数

let resultData = ref([]);
let currMapLevel = ref("city");
let recordsCenter = ref([]);

const layoutCenter = ref(["50%", "50%"]);
const layoutCenterSzie = ref("80%");

const layoutMainCityCenter = ref(["25%", "20%"]);
const layoutMainCitySize = ref("40%");

let myMapData = ref([
  {
    区县: "江津区",
    数量: "155",
    排名: 1,
  },
  {
    区县: "渝北区",
    数量: "130",
    排名: 2,
  },
  {
    区县: "重庆市",
    数量: "123",
    排名: 3,
  },
  {
    区县: "江北区",
    数量: "97",
    排名: 4,
  },
  {
    区县: "万州区",
    数量: "91",
    排名: 5,
  },
  {
    区县: "沙坪坝区",
    数量: "83",
    排名: 6,
  },
  {
    区县: "合川区",
    数量: "79",
    排名: 7,
  },
  {
    区县: "九龙坡区",
    数量: "76",
    排名: 8,
  },
  {
    区县: "长寿区",
    数量: "75",
    排名: 9,
  },
  {
    区县: "秀山县",
    数量: "73",
    排名: 10,
  },
  {
    区县: "巴南区",
    数量: "63",
    排名: 11,
  },
  {
    区县: "涪陵区",
    数量: "63",
    排名: 11,
  },
  {
    区县: "大渡口区",
    数量: "59",
    排名: 13,
  },
  {
    区县: "南岸区",
    数量: "54",
    排名: 14,
  },
  {
    区县: "渝中区",
    数量: "53",
    排名: 15,
  },
  {
    区县: "北碚区",
    数量: "51",
    排名: 16,
  },
  {
    区县: "大足区",
    数量: "48",
    排名: 17,
  },
  {
    区县: "南川区",
    数量: "48",
    排名: 17,
  },
  {
    区县: "云阳县",
    数量: "47",
    排名: 19,
  },
  {
    区县: "永川区",
    数量: "45",
    排名: 20,
  },
  {
    区县: "奉节县",
    数量: "40",
    排名: 21,
  },
  {
    区县: "酉阳县",
    数量: "39",
    排名: 22,
  },
  {
    区县: "黔江区",
    数量: "36",
    排名: 23,
  },
  {
    区县: "垫江县",
    数量: "35",
    排名: 24,
  },
  {
    区县: "彭水县",
    数量: "34",
    排名: 25,
  },
  {
    区县: "丰都县",
    数量: "30",
    排名: 26,
  },
  {
    区县: "綦江区",
    数量: "28",
    排名: 27,
  },
  {
    区县: "巫溪县",
    数量: "27",
    排名: 28,
  },
  {
    区县: "巫山县",
    数量: "26",
    排名: 29,
  },
  {
    区县: "璧山区",
    数量: "25",
    排名: 30,
  },
  {
    区县: "石柱县",
    数量: "20",
    排名: 31,
  },
  {
    区县: "忠县",
    数量: "19",
    排名: 32,
  },
  {
    区县: "城口县",
    数量: "10",
    排名: 33,
  },
  {
    区县: "荣昌县",
    数量: "18",
    排名: 34,
  },
  {
    区县: "武隆区",
    数量: "128",
    排名: 35,
  },
  {
    区县: "潼南区",
    数量: "108",
    排名: 36,
  },
]);

// 假设你有一个函数根据乡镇名字来动态导入对应的 JSON 文件
async function loadTownData(townName: string) {
  try {
    const module = await import(`./map/streetMap/${townName}.json`);
    return module.default;
  } catch (error) {
    console.error(`Failed to load data for ${townName}:`, error);
    return null;
  }
}

function filterCityData() {
  const mainCityName = areaCodeList
    .filter((c1: any) => c1.isCity)
    .map((c2: any) => c2.label);
  cityJsonData.value.features = mapData.features.filter((item) =>
    mainCityName.includes(item.properties.name)
  );

  console.log("cityJsonData.value", cityJsonData.value);
}
async function initMap() {
  const myChart = echarts.init(document.getElementById("fiveChart"));

  echarts.registerMap("mapData", mapjsonData.value); // 重庆市数据



  echarts.registerMap("mapCityData", mainCity); // 主城数据
  

  //筛选主城数据

  filterCityData();
  // echarts.registerMap("mapData", mapjsonData.value); // 重庆市数据

  myChart.showLoading();

  // 图表配置项
  let option = {
    geo: [
      /* 重庆市 */
      // 第一层
      {
        map: "mapData",
        z: 3,
        zoom: 1,
        aspectScale: 0.85,
        roam: true,
        layoutCenter: layoutCenter.value,
        layoutSize: layoutCenterSzie.value, //保持地图宽高比
        itemStyle: {
          borderColor: "#c8feff",
          borderWidth: 0.5,
          shadowBlur: 3,
          shadowColor: "#66edff",
          areaColor: "#0862db",
        },
        label: {
          // show: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            borderWidth: 1,
            areaColor: "#2da9ff",
          },
          label: {
            show: false,
            color: "#ffffff",
          },
        },
        data: resultData.value,
      },
      // 第二层
      {
        map: "mapData",
        z: 2,
        zoom: 1,
        aspectScale: 0.85,
        roam: true,
        silent: true,
        layoutCenter: layoutCenter.value,

        layoutSize: layoutCenterSzie.value, //保持地图宽高比

        regions: [
          {
            // 隐藏南海诸岛,因为顶层已经添加过了
            name: "南海诸岛",
            itemStyle: {
              opacity: 0, // 为 0 时不绘制该图形
            },
            label: {
              show: false,
            },
          },
        ],
        itemStyle: {
          borderColor: "#d8feff",
          borderWidth: 3,
          areaColor: "#0862db",
          shadowBlur: 10,
          shadowColor: "#22a1ff",
          shadowOffsetX: 0,
          shadowOffsetY: 8,
        },
      },
      // // 第三层
      {
        map: "mapData",
        z: 1,
        zoom: 1,
        aspectScale: 0.85,
        roam: true,
        silent: true,
        layoutCenter: ["50%", "51.5%"],
        layoutSize: layoutCenterSzie.value, //保持地图宽高比

        itemStyle: {
          borderColor: "#c8feff",
          borderWidth: 1,
          areaColor: "#4ebaff",
        },
        regions: [
          {
            // 隐藏南海诸岛,因为顶层已经添加过了
            name: "南海诸岛",
            itemStyle: {
              opacity: 0, // 为 0 时不绘制该图形
            },
            label: {
              show: false,
            },
          },
        ],
      },
      // // 第四层
      {
        map: "mapData",
        z: 0,
        zoom: 1,
        roam: true,
        aspectScale: 0.85,
        layoutCenter: ["50%", "52%"],
        layoutSize: layoutCenterSzie.value, //保持地图宽高比
        silent: true,
        itemStyle: {
          borderColor: "#66edff",
          borderWidth: 2,
          shadowBlur: 20,
          shadowColor: "#0f4e8d",
          areaColor: "#1752ad",
          shadowOffsetX: 0,
          shadowOffsetY: 8,
        },
      },
    ],

    series: [
      // //重庆市
      {
        type: "map",
        map: "mapData",
        aspectScale: 0.85,
        roam: true,
        zlevel: 1,
        // center: [1, 1],
        zoom: 1, // 初始化展示多大
        layoutCenter: layoutCenter.value,
        layoutSize: layoutCenterSzie.value, //保持地图宽高比

        /* 用户最多/少 能放大到多少 */
        scaleLimit: {
          min: 1,
          max: 30,
        },
        selectedMode: "single", //  单选或者多选 multiple
        label: {
          show: true,
          distance: 50,
          fontSize: 12, // 标签文字大小
          offset: [0, 0],
          minMargin: 1,
          color: "white",
          formatter: (data: any) => {
            if (
              areaCodeList.find(
                (item: any) => item.label == data.name && item.isCity
              )
            ) {
              return "";
            } else {
              return data.name;
            }
          },
          fontStyle: "normal", // normal-正常 'italic'-斜体
          // fontWeight: 500,
          align: "right",
          // color: "#ffffff",
          // backgroundColor: "red", // label的背景颜色
          // borderWidth: 1,
          // borderColor: "#333",
          // borderRadius: 5,
          // padding: 10,
          shadowColor: "#008c8c",
          shadowOffsetX: 2,
          shadowOffsetY: 2,
          textBorderWidth: 1,
          // textBorderColor: "blue",
          textShadowColor: "#ff6700",
          textShadowOffsetX: 5,
          textShadowOffsetY: 5,
          // height: 20,
          // width: 50,
        },
        // 地图区域的多边形 图形样式。
        itemStyle: {
          areaColor: "#115698",
          color: "#115597",
          borderColor: "white",
          borderWidth: 1,
          borderType: "solid",
          borderDashOffset: 10,
          //地图shadow
          // shadowColor: "#0071c4", // 阴影颜色
          // shadowColor: "red",
          // shadowBlur: 25, // 阴影模糊程度
          // shadowOffsetX: 120, // 阴影x偏移位置
          // shadowOffsetY: 1, // 阴影Y偏移位置
          opacity: 1, // 地图的透明度
        },
        // 高亮状态上多边形和标签样式。
        emphasis: {
          // 是否开启鼠标移上去后高亮
          // disabled: true,
        },
        // 地图距离容器的位置
        // left: "50",
        // layoutCenter: ["50%", "50%"],
        // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
        // layoutSize: 100,
        data: resultData.value,
        markPoint: {},
      },
      // // 主城数据
      // {
      //   type: "map",
      //   map: "mapCityData",
      //   roam: true,
      //   zlevel: 1,
      //   // center: [1, 1],
      //   zoom: 1, // 初始化展示多大
      //   layoutCenter: layoutMainCityCenter.value,
      //   layoutSize: layoutMainCitySize.value,
      //   /* 用户最多/少 能放大到多少 */
      //   scaleLimit: {
      //     min: 1,
      //     max: 30,
      //   },
      //   selectedMode: "single", //  单选或者多选 multiple
      //   label: {
      //     show: true,
      //     distance: 50,
      //     fontSize: 12, // 标签文字大小
      //     offset: [0, 0],
      //     minMargin: 1,
      //     color: "white",
      //     formatter: (data: any) => {},
      //     fontStyle: "normal", // normal-正常 'italic'-斜体
      //     // fontWeight: 500,
      //     align: "right",
      //     // color: "#ffffff",
      //     // backgroundColor: "red", // label的背景颜色
      //     // borderWidth: 1,
      //     // borderColor: "#333",
      //     // borderRadius: 5,
      //     // padding: 10,
      //     shadowColor: "#008c8c",
      //     shadowOffsetX: 2,
      //     shadowOffsetY: 2,
      //     textBorderWidth: 1,
      //     // textBorderColor: "blue",
      //     textShadowColor: "#ff6700",
      //     textShadowOffsetX: 5,
      //     textShadowOffsetY: 5,
      //     // height: 20,
      //     // width: 50,
      //   },
      //   // 地图区域的多边形 图形样式。
      //   itemStyle: {
      //     areaColor: "#115698",
      //     color: "#115597",
      //     borderColor: "white",
      //     borderWidth: 1,
      //     borderType: "solid",
      //     borderDashOffset: 10,
      //     //地图shadow
      //     // shadowColor: "#0071c4", // 阴影颜色
      //     // shadowColor: "red",
      //     // shadowBlur: 25, // 阴影模糊程度
      //     // shadowOffsetX: 120, // 阴影x偏移位置
      //     // shadowOffsetY: 1, // 阴影Y偏移位置
      //     opacity: 1, // 地图的透明度
      //   },
      //   // 高亮状态上多边形和标签样式。
      //   emphasis: {
      //     // 是否开启鼠标移上去后高亮
      //     // disabled: true,
      //   },
      //   // 地图距离容器的位置
      //   // left: "50",
      //   // layoutCenter: ["50%", "50%"],
      //   // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
      //   // layoutSize: 100,
      //   data: resultData.value,
      //   markPoint: {},
      // },
    ],
  };

  // 设置图表实例的配置项以及数据
  myChart.setOption(option);
  myChart.hideLoading();
  myChart.on("click", async function (params) {
    // 在这里实现下钻的功能

    if (currMapLevel.value == "city") {
      // 下钻到区县
      if (params.name) {
        const townMapData = await loadTownData(params.name);
        echarts.registerMap("townMapData", townMapData); // 区县地图

        const newOption: any = myChart.getOption(); //
        newOption.geo[0].map = "townMapData";
        newOption.geo[1].map = "townMapData";
        newOption.geo[2].map = "townMapData";
        newOption.geo[3].map = "townMapData";

        newOption.series[0].map = "townMapData";

        newOption.geo[0].center = newOption.series[0].center;
        newOption.geo[1].center = newOption.series[0].center;
        newOption.geo[2].center = newOption.series[0].center;
        newOption.geo[3].center = newOption.series[0].center;

        newOption.geo[0].zoom = newOption.series[0].zoom;
        newOption.geo[1].zoom = newOption.series[0].zoom;
        newOption.geo[2].zoom = newOption.series[0].zoom;
        newOption.geo[3].zoom = newOption.series[0].zoom;

        console.log("newOption.series[0].center", newOption.series[0].center);

        currMapLevel.value = "town";

        myChart.setOption(newOption, true);
      }
    } else {
      // 返回市级
      const newOption: any = myChart.getOption();
      newOption.geo[0].map = "mapData";
      newOption.geo[1].map = "mapData";
      newOption.geo[2].map = "mapData";
      newOption.geo[3].map = "mapData";

      newOption.series[0].map = "mapData";

      newOption.series[0].data = resultData.value;

      myChart.setOption(newOption);

      currMapLevel.value = "city";
    }
  });

  myChart.on("georoam", function (params: any) {
    const newOptions: any = myChart.getOption();

    // 平移
    if (params.dy != null && params.dx != null) {
      console.log("xparams", params);

      newOptions.geo[0].center = newOptions.series[0].center;
      newOptions.geo[1].center = newOptions.series[0].center;
      newOptions.geo[2].center = newOptions.series[0].center;
      newOptions.geo[3].center = newOptions.series[0].center;

      recordsCenter.value = newOptions.series[0].center;

      console.log(recordsCenter.value);

      // newOptions.geo[2].center = newOptions.series[1].center;
      // newOptions.geo[3].center = newOptions.series[1].center;
    } else {
      newOptions.geo[0].zoom = newOptions.series[0].zoom;
      newOptions.geo[1].zoom = newOptions.series[0].zoom;
      newOptions.geo[2].zoom = newOptions.series[0].zoom;
      newOptions.geo[3].zoom = newOptions.series[0].zoom;

      // newOptions.geo[2].zoom = newOptions.series[1].zoom;
      // newOptions.geo[3].zoom = newOptions.series[1].zoom;
      newOptions.geo[0].center = newOptions.series[0].center;
      newOptions.geo[1].center = newOptions.series[0].center;
      newOptions.geo[2].center = newOptions.series[0].center;
      newOptions.geo[3].center = newOptions.series[0].center;
    }

    myChart.setOption(newOptions, true);
  });
}

onMounted(() => {
  //
  resultData.value = myMapData.value.map((item) => {
    const color = setColor(item.数量);
    return {
      ...item,
      name: item.区县,
      value: item.数量,
      itemStyle: {
        areaColor: color ? color : "red",
        // borderColor: "red", // 这里设置了 series或者geo就不会生效了
        // borderWidth: 0.5,
      },
    };
  });

  // 过滤数据
  initMap();
});
</script>

<style class="fiveChart" lang="less">
.container {
  background: #032459;
  width: 100%;
  height: 100%;

  border: 1px solid black;
  #fiveChart {
    width: 100%;
    height: 100%;
  }
}
</style>
